<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>志愿者平台</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/zyz.js"></script>
</head>
<body>
<div id="app">
    <myheader></myheader>
    <main class="c900">
        <el-carousel height="400px">
            <el-carousel-item>
                <a href="detail.html"><img src="https://img1.baidu.com/it/u=4174360223,357624318&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333"></a>
            </el-carousel-item>
            <el-carousel-item>
                <a href="detail.html"><img src="https://img2.baidu.com/it/u=834929188,3603437227&fm=253&fmt=auto&app=138&f=JPEG?w=1077&h=500"></a>
            </el-carousel-item>
            <el-carousel-item>
                <a href="detail.html"><img src="https://img1.baidu.com/it/u=1076313378,882320911&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500"></a>
            </el-carousel-item>
            <el-carousel-item>
                <a href="detail.html"><img src="https://img0.baidu.com/it/u=3408542474,4161405193&fm=253&fmt=auto&app=138&f=JPEG?w=958&h=500"></a>
            </el-carousel-item>
        </el-carousel>
        <h1>志愿者活动</h1>
        <div class="grid4">
            <div class="card" v-for="t in tasks">
                <a :href="'detail.html?id=' + t.id">
                    <img :src="t.image" alt="">
                </a>
                <span>{{t.name}}</span>
            </div>
        </div>
        <el-pagination background layout="prev, pager, next" style="margin-top: 30px"
                       :total="page.total" :page-size="8"
                        @current-change="queryPage">
        </el-pagination>
    </main>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            tasks:[],
            page:{}
        },
        created() {
            this.query();
        },
        methods: {
            queryPage(pageNum){
                this.page.current = pageNum;
                this.query();
            },
            query(){
                let page = "";
                if(this.page.current){
                    page = "?page=" + this.page.current;
                }
                axios.get("queryTask" + page).then(res=> {
                    this.page = res.data
                    this.tasks = res.data.records;
                });
            }

        }
    })
</script>


<style>
    *{
        color:#222;
        transition: all .5s;
    }
    main.c900 {
        flex-wrap: wrap;
        align-content: start;
    }

    .card {
        width: 210px;
        box-sizing: border-box;
        padding: 10px;
        box-shadow: 1px 1px 1px 1px #daa9a9;
        border-radius: 5px;
    }

    .card:hover{
        transform: scale(1.1);
        box-shadow: 5px 5px 5px 5px #daa9a9;
    }

    .card > a > img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        display: block;
    }
    .card > span {
        display: block;
        margin-block: 5px;
    }

    body {
        margin: 0px;
        padding: 0px;
        background-size: cover;
        background-image: url("https://img.tukuppt.com/bg_grid/01/21/87/KNwCBCOQTJ.jpg%21/fh/350");
    }

    a {
        text-decoration: none;
        color: #666
    }

    img {
        width: 100%;
        object-fit: cover;
        border-radius: 5px;
    }

    .c900 {
        width: 900px;
        margin-inline: auto;
    }

    .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    .grid2,.grid3,.grid4{
        grid-gap: 20px;
    }
    .grid2 {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: auto auto;
    }

    .grid3 {
        display: grid;
        grid-template-columns: auto auto auto;
    }

    .grid4 {
        display: grid;
        grid-template-columns: auto auto auto auto;
    }

    #app > header {
        background-color: #0f9ae0;
        background-size: cover;
        position: sticky;
        top: 0px;
        z-index: 9999;
        height: 60px;
    }

    #app > header h1 {
        margin: 10px;
    }

    #app > header span > a {
        margin-left: 20px;
        color: #fff;
    }

    #app > main {
        background-color: #eee8;
        min-height: calc(100% - 100px);
        padding: 20px;
    }
</style>
</body>
</html>